<template>
  <view class="cu-list menu sm-border card-menu" @tap="onRootClick">
    <template v-for="(item,idx) in list" >
      <view class="arrow cu-item" :key="idx" @tap="toPage(item.to)" v-if="canTo(item)">

        <button v-if="item.openType" class="cu-btn content" :open-type="item.openType">
          <text :class="[item.color ? `text-${item.color}` : 'text-blue',`cuIcon-${item.icon}`]"></text>
          <text class="item-title">{{ item.title }}</text>
        </button>

        <view class="content" v-else>
          <text :class="[item.color ? `text-${item.color}` : 'text-blue',`cuIcon-${item.icon}`]"></text>
          <text class="item-title">{{ item.title }}</text>
        </view>

      </view>
    </template>

  </view>
</template>

<script lang="ts" setup>
import {useStore} from "vuex";
import {computed} from "vue";
import {useLogin} from "../../pages/account/useLogin";
import {usePermission} from "../../utils/usePermission";

interface Service {
  title: string
  icon: string
  to?: string
  color?: string
  openType?: 'contact' | 'share'
}

interface ServiceNeedAuth extends Service{
  auth: boolean
  QX_ID: number
}

interface CuListProps {
  list: Service[]
}
withDefaults(defineProps<CuListProps>(), {

})

const {ROLE_ID, hasLogIn} = useLogin()

function toPage(to: string){
  if (to){
    uni.navigateTo({
      url: to
    })
  }
}

const {can} = usePermission()
const canTo = computed(() => ((item: Service | ServiceNeedAuth) => {
  if (item.hasOwnProperty('auth') && (item as ServiceNeedAuth).auth){
      return can((item as ServiceNeedAuth).QX_ID)
  }

  return true
}))

function onRootClick(e: Event){
}
</script>

<style scoped>
.item-title{
  color: rgba(85, 92, 99, 1);
}
</style>
